<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex可视化</title>
    <link rel="canonical" href="https://www.imalun.com/">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.png">
    <link href="https://cdn.bootcdn.net/ajax/libs/checkbox.css/1.1.3/css/away/away.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #app {
            display: flex;
            height: 100vh;
        }

        .left {
            text-align: right;
            width: 280px;
            margin: 20px 10px;
            padding: 20px;
            background-color: rgb(243, 243, 243);
        }


        .right {
            flex: 1;
            margin: 20px 10px;
            background-color: rgb(243, 243, 243);
        }

        .container-option {
            margin: 10px 0;
            padding: 10px 0;

        }

        .container-option+.container-option {
            border-top: 1px dashed #aaa;
        }

        .flex-box {
            height: 100%;
            width: 100%;
        }

        .flex-box-item {
            background-color: #4419aab7;
            color: #fff;
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            margin: 10px;
            font-weight: 600;
            user-select: none;
        }

        .flex-box-item.check {
            background-color: red;
        }

        .w120 {
            width: 120px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="left">
            <h3>容器</h3>
            <div v-for='(item,index) in container' :key="index" class="container-option">
                <h4 class="title">
                    <span v-text="item.title"></span>
                    <select v-model='flexStyle[item.title]' class="w120">
                        <option v-for='(elem,index) in item.value' :key="index" :label="elem" :value="elem"></option>
                    </select>
                </h4>
            </div>
            <h3>子元素</h3>
            <div class="container-option">
                <h4 class="title">
                    order
                    <input type="number" v-model='flexItemsStyle[index].order' class="w120">
                </h4>
            </div>
            <div class="container-option">
                <h4 class="title">
                    flex-grow
                    <input type="number" v-model='flexItemsStyle[index]["flex-grow"]' class="w120">
                </h4>
            </div>
            <div class="container-option">
                <h4 class="title">
                    flex-shrink
                    <input type="number" v-model='flexItemsStyle[index]["flex-shrink"]' class="w120">
                </h4>
            </div>
            <div class="container-option">
                <h4 class="title">
                    flex-basis
                    <input type="text" v-model='flexItemsStyle[index]["flex-basis"]' class="w120">
                </h4>
            </div>
            <div class="container-option">
                <h4 class="title">
                    align-self
                    <select v-model='flexItemsStyle[index]["align-self"]' class="w120">
                        <option v-for='(elem,index) in alignSelfItems' :key="index" :label="elem" :value="elem"></option>
                    </select>
                </h4>
            </div>

            <div>
                <button @click="handleAdd">添加</button>
                <button @click="handleDel">删除</button>
            </div>
        </div>
        <div class="right">
            <div class="flex-box" :style='flexStyle'>
                <div class="flex-box-item" :class="{check:index===idx}" @click="index=idx;" :style="item" v-for="(item,idx) in flexItemsStyle" :key="idx"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script>
        let item = {
            'order': 0,
            'flex-grow': 0,
            'flex-shrink': 1,
            'flex-basis': 'auto',
            'align-self': 'auto'
        }
        new Vue({
            el: '#app',
            data() {
                return {
                    container: [
                        {
                            title: "flex-direction",
                            default: "row",
                            value: ["row", "row-reverse", "column", "column-reverse"]
                        },
                        {
                            title: "flex-wrap",
                            default: "nowrap",
                            value: ["nowrap", "wrap", "wrap-reverse"]
                        },
                        {
                            title: "justify-content",
                            default: "flex-start",
                            value: ["flex-start", "flex-end", "center", "space-between", "space-around"]
                        },
                        {
                            title: "align-items",
                            default: "stretch",
                            value: ["flex-start", "flex-end", "center", "baseline", "stretch"]
                        },
                        {
                            title: "align-content",
                            default: "stretch",
                            value: ["flex-start", "flex-end", "center", "space-between", "space-around", "stretch"]
                        }
                    ],
                    item: [
                        {
                            title: "align-content",
                            default: "stretch",
                            value: ["flex-start", "flex-end", "center", "space-between", "space-around", "stretch"]
                        }
                    ],
                    alignSelfItems: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"],
                    flexStyle: {
                        "display": "flex",
                        "flex-direction": "row",
                        "flex-wrap": "nowrap",
                        "justify-content": "flex-start",
                        "align-items": "stretch",
                        "align-content": "stretch"
                    },
                    index: 0,
                    flexItemsStyle: [
                        { ...item },
                        { ...item },
                        { ...item },
                    ]
                }
            },
            methods: {
                handleAdd() {
                    this.flexItemsStyle.push({ ...item })
                },
                handleDel() {
                    if (this.flexItemsStyle.length > 1) {
                        if (this.flexItemsStyle.length - 1 <= this.index) {
                            --this.index
                        }
                        this.flexItemsStyle.pop()
                    }
                }
            }
        })
    </script>
</body>

</html>